<template>
  <div class="app-container">
    <el-form class="search-form">
      <el-form-item class="form-button-bar">
        <el-button class="filter-item el-icon-upload2" @click="handleOnline" type="success">&nbsp;上线
        </el-button>
        <el-button class="filter-item el-icon-back" style="margin-left: 10px;" @click="handleRevocation" type="warning">&nbsp;撤回
        </el-button>
        <el-button class="filter-item el-icon-delete" style="margin-left: 10px;" @click="handleDeleteList" type="danger"> 失效
        </el-button>
        <el-button class="filter-item el-icon-circle-check-outline" style="margin-left: 10px;" @click="handleAudited" type="primary">&nbsp;审核通过
        </el-button>
        <el-button :loading="refreshing" class="filter-item el-icon-refresh" style="margin-left: 10px;" @click="refreshList" type="danger">&nbsp;刷新列表
        </el-button>
        <el-button plain class="search-bar-button" style="float: right;border-width: 2px" type="primary" @click="searchBarVisable = !searchBarVisable">{{searchBarVisable?'收起':'展开'}}搜索项<i
            :class="searchBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
        </el-button>
      </el-form-item>
    </el-form>
    <el-form class="search-form" label-width="100px">
      <div :class="searchBarVisable?'':'search-bar-hide'" style="transition:  all .3s ease-in-out;">
        <el-row>
          <el-col :span="12">
            <el-form-item label="标题" label-width="80px">
              <el-input :clearable="true" v-model="listQuery.title" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row v-for="(k,index) in listQuery.tags" :key="k.id">
          <el-col :span="12">
            <el-form-item :label="'标签'+(index+1)">
              <el-popover placement="bottom-start" trigger="click" @show="filterText1 = ''">
                <el-input placeholder="输入关键字进行过滤" v-model="filterText1">
                </el-input>
                <el-tree :filter-node-method="filterNode" ref="tree4" :props="props" :data="treeList" :highlight-current="false" node-key="code" :default-expanded-keys="[0]"
                  :render-content="renderClassContent">
                </el-tree>
                <el-select :clearable="true" popper-class="hide" slot="reference" v-model="k.tagName" type="text" placeholder="请输入">
                  <el-option v-for="(item, index) in options" v-show="false" :key="index.id" :value="item.id" :label="item.name"></el-option>
                </el-select>
              </el-popover>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="权重打分">
              <el-row :gutter="20">
                <el-col :span="4">
                  <el-select v-model="k.tagScore" placeholder="请选择">
                    <el-option v-for="item in qzoptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="12">
                  <el-input :clearable="true" v-model="k.tagComparision" placeholder="请输入"></el-input>
                </el-col>
                <el-col :span="4" v-if="index===0">
                  <el-button type="primary" icon="el-icon-plus" circle @click="addTags"></el-button>
                </el-col>
                <el-col :span="4" v-else>
                  <el-button type="primary" icon="el-icon-minus" circle @click="delTags(index)"></el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row> -->
         <el-row>
              <el-col :span="12" v-for="(k,index) in listQuery.tagList" :key="k.id">
                <el-row>
                  <el-col :span="10">
                    <el-form-item :label="tagName[k.tagType]+'标签'" label-width="80px">
                      <el-select v-model="k.tagCode" value-key="tag_code" clearable filterable remote reserve-keyword placeholder="请输入关键词"
                        :remote-method="((query)=>{remoteMethodSearch(k.tagType,query)})" :loading="loading">
                        <el-option v-for="item in searchOptions[tagType[k.tagType]]" :key="item.tag_code" :label="item.name" :value="item.tag_code">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="14">
                    <el-form-item label="权重打分" label-width="80px">
                      <el-row>
                        <el-col :span="11">
                          <el-select v-model="k.tagComparision" clearable placeholder="">
                            <el-option v-for="item in qzoptions" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                          </el-select>
                        </el-col>
                        <el-col :span="13">
                          <el-input :clearable="true" v-model="k.tagScore" placeholder="分数"></el-input>
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
         </el-row>

        <el-form-item label="审核状态" label-width="80px">
          <el-radio v-model="listQuery.viewStatus" label="" border size="mini">全部</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="0" border size="mini">未审核</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="1" border size="mini">已审核</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="2" border size="mini">已上线</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="3" border size="mini">已撤回</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="4" border size="mini">已驳回</el-radio>
          <el-radio v-model="listQuery.viewStatus" label="6" border size="mini">已失效</el-radio>
        </el-form-item>
        <el-form-item label="推送方式" label-width="80px">
          <el-radio v-model="listQuery.pushChannel" label="" border size="mini">全部</el-radio>
          <el-radio v-model="listQuery.pushChannel" label="全员推送" border size="mini">全员推送</el-radio>
          <el-radio v-model="listQuery.pushChannel" label="不推送" border size="mini">不推送</el-radio>
          <el-radio v-model="listQuery.pushChannel" label="按板块推送" border size="mini">按板块推送</el-radio>
          <el-radio v-model="listQuery.pushChannel" label="按个股推送" border size="mini">按个股推送</el-radio>
        </el-form-item>
        <el-form-item label="更新时间" label-width="80px">
          <el-radio v-model="listQuery.chooseTime" label="" border size="mini">自定义</el-radio>
          <el-radio v-model="listQuery.chooseTime" label="1" border size="mini">今天</el-radio>
          <el-radio v-model="listQuery.chooseTime" label="3" border size="mini">近三天</el-radio>
        </el-form-item>
        <el-form-item label="" label-width="80px">
          <el-date-picker :clearable="true" type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="listQuery.chooseTime = ''" @keyup.enter.native="getList" style="width: 450px;"
            class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="listQuery.updateTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发布时间" label-width="80px">
          <el-radio v-model="listQuery.chooseTime2" label="" border size="mini">自定义</el-radio>
          <el-radio v-model="listQuery.chooseTime2" label="1" border size="mini">今天</el-radio>
          <el-radio v-model="listQuery.chooseTime2" label="3" border size="mini">近三天</el-radio>
        </el-form-item>
        <el-form-item label="" label-width="80px">
          <el-date-picker :clearable="true" type="datetimerange" :default-time="['00:00:00', '23:59:59']" @change="listQuery.chooseTime2 = ''" @keyup.enter.native="getList" style="width: 450px;"
            class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" v-model="listQuery.publishTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="getList">
            {{$t('table.search')}}
          </el-button>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="resetSearch">
                重置
        </el-button>
        </el-form-item>
      </div>
    </el-form>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="加载中..." border fit highlight-current-row @selection-change="handleSelectionChange" style="width: 100%">
      <el-table-column align="center" type="selection" width="55">
      </el-table-column>
      <el-table-column align="center" label="标题" min-width="200">
        <template slot-scope="scope">
          <el-button class="preview-button" type="text" @click="handleShow(scope.row)">{{scope.row.title}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="发布时间" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.publishTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="更新时间" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.updateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="排序时间" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.orderTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="所属栏目">
        <template slot-scope="scope">
          <el-tooltip :visible-arrow="false" class="tooltip" effect="dark" :content="scope.row.newsClassStr" placement="top-start">
            <span class="nowrap">{{scope.row.newsClassStr}}</span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态">
        <template slot-scope="scope">
          <el-tag size="small" :type="formatClass(scope.row.viewStatus)">{{formatStatu(scope.row.viewStatus)}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核未通过原因" min-width="250">
        <template slot-scope="scope">
          <span v-if="!formatReject(scope.row.auditRejectMessage).id">{{scope.row.auditRejectMessage}}</span>
          <span v-else>
            {{formatReject(scope.row.auditRejectMessage).text.split('【')[0]}}
            <el-button class="preview-button" type="text" @click="handleShow(formatReject(scope.row.auditRejectMessage))">
              {{(formatReject(scope.row.auditRejectMessage).text.replace(/(^[^【]*)|([^】]*$)/g, ''))}}
            </el-button>
            {{formatReject(scope.row.auditRejectMessage).text.split('】').reverse()[0]}}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核人">
        <template slot-scope="scope">
          <span>{{scope.row.auditor}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="来源">
        <template slot-scope="scope">
          <span>{{scope.row.source}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="推送方式">
        <template slot-scope="scope">
          <span>{{scope.row.sendChannel}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" :label="$t('table.actions')" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.viewStatus === 1||scope.row.viewStatus === 2||scope.row.viewStatus === 6" content="查看" placement="top">
            <el-button :loading="scope.row.editLoading = false" class="button-icon el-icon-view" type="success" size="mini" @click="handleShow(scope.row)">
            </el-button>
          </el-tooltip>
          <el-tooltip v-else content="编辑" placement="top">
            <el-button :loading="scope.row.editLoading = false" class="button-icon el-icon-edit" type="primary" size="mini" @click="handleUpdate(scope.row)">
            </el-button>
          </el-tooltip>
          <el-tooltip v-if="scope.row.status!='deleted'" content="失效" placement="top">
            <el-button class="button-icon el-icon-delete" size="mini" type="danger" :disabled="scope.row.viewStatus === 6" @click="handleDelete(scope.row)">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :fullscreen='true' :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="130px" style='margin: auto; max-width: 1200px'>
        <el-form-item label="标题" prop="title">
          <el-input v-model="temp.title" type="text" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="股票" prop="stockInfos">
              <el-select v-model="temp.stockInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodstock" :loading="loading">
                <el-option v-for="item in temp.stockInfoslist" :key="item.tag_code+Math.random()" :label="item.name+'('+item.code+')'" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基金" prop="fundInfos">
              <el-select v-model="temp.fundInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodfund" :loading="loading">
                <el-option v-for="item in temp.fundInfoslist" :key="item.tag_code+Math.random()" :label="item.name+'('+item.code+')'" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主题" prop="conceptInfos">
              <el-select v-model="temp.conceptInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodtheme" :loading="loading">
                <el-option v-for="item in options0" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业" prop="industryInfos">
              <el-select v-model="temp.industryInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodindustry" :loading="loading">
                <el-option v-for="item in options1" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="市场">
              <el-select v-model="temp.marketInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodmarket" :loading="loading">
                <el-option v-for="item in flowChartList" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人物">
              <el-select v-model="temp.peopleInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodpeople" :loading="loading">
                <el-option v-for="item in rwOptions" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地域">
              <el-select v-model="temp.districtInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethoddistrict" :loading="loading">
                <el-option v-for="item in areaOptions" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织">
              <el-select v-model="temp.organInfos" value-key="tag_code" multiple filterable remote reserve-keyword placeholder="请输入关键词" :remote-method="remoteMethodorgan" :loading="loading">
                <el-option v-for="item in organOptions" :key="item.tag_code+Math.random()" :label="item.name" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="核心标签(主)" prop="mainKeyword">
              <el-tag v-for="tag in temp.mainKeyword" :key="tag">{{tag}}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核心标签(副)" prop="viceKeyword">
              <el-tag v-for="tag in temp.viceKeyword" :key="tag">{{tag}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="online">
              <el-select v-model="temp.online" type="text" placeholder="请选择">
                <el-option :value="0" label="立即上线"></el-option>
                <el-option :value="1" label="暂缓上线"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="推送方式" prop="sendChannel">
              <el-select :default-first-option="true" v-model="temp.sendChannel" type="text" placeholder="请选择">
                <el-option value="全员推送" label="全员推送"></el-option>
                <el-option value="不推送" label="不推送"></el-option>
                <el-option value="按板块推送" label="按板块推送"></el-option>
                <el-option value="按个股推送" label="按个股推送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="写稿类型" prop="author">
              <el-select v-model="temp.author" disabled>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="置顶时间" prop="topTime">
              <el-date-picker v-model="temp.topTime" type="datetime" placeholder="选择日期"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="正文" prop="content">
              <tinymce :data="temp" :sourceDict="dataDict.news_source" :preview="true" :preview-callback="handlePreview" ref="editor" :height="300" v-model="temp.content"></tinymce>
            </el-form-item>
          </el-col>
          <el-col v-show="preview" :span="24">
            <el-form-item label="原文">
              <el-card>
                <!--<div class="preview" v-html="formatOriginal(previewContent)"></div>-->
                <div class="preview" v-html="previewContent"></div>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发布时间" prop="publishTime">
              <el-input disabled v-model="temp.publishTime" type="text" :rows="5" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源" prop="source">
              <el-input disabled v-model="temp.source"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button plain class="search-bar-button" style="border-width: 2px" type="primary" @click="extendBarVisable = !extendBarVisable">{{extendBarVisable?'收起':'展开'}}附加字段<i
                  :class="extendBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col v-show="extendBarVisable" v-for="i of 10" :key='i' :span="24">
            <el-form-item :label="'附加字段'+i" :prop="'additional_'+ i">
              <el-input v-model="temp['additional_'+ (i-1)]" type="text" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="资讯配图" prop="">
              <el-button :disabled="!temp.newsClassId.length" :loading="imageLoading" type="success" @click="getImage">智能配图
              </el-button>
              <el-button :disabled="!image" :loading="imageListLoading" type="warning" @click="getImageList">手动选择
              </el-button>
            </el-form-item>
            <el-form-item>
              <span v-if="!image">暂无配图</span>
              <img v-else style="max-height: 300px" :src="image.url" :alt="image.name">
            </el-form-item>
          </el-col>
          <el-dialog width="70%" title="选择图片" :visible.sync="imageListVisible" append-to-body>
            <el-row :type="'flex'" style="flex-wrap: wrap; align-items:center">
              <el-col :span="6" v-for="(image, index) in imageList" :key="index">
                <el-button class="image-button" @click="chooseImage(image)">
                  <img style="max-height: 200px!important" v-lazy="image.url" :alt="image.name" />
                </el-button>
              </el-col>
            </el-row>
          </el-dialog>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="success" @click="updateAuditData">审核通过</el-button>
        <el-button type="primary" @click="updateData">修改并保存</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog :fullscreen='true' :title="'查看'" :visible.sync="dialogFormVisible2">
      <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="130px" style='margin: auto; max-width: 1200px'>
        <el-form-item label="标题" prop="title">
          <el-input disabled v-model="temp.title" type="text" placeholder="请输入">
          </el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="股票">
              <el-tooltip v-for="tag in temp.stockInfoslist" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name+'('+tag.code+')'}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.stockInfoslist" :key="tag.tag_code">{{tag.name+'('+tag.code+')'}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="基金">
              <el-tooltip v-for="tag in temp.fundInfoslist" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name+'('+tag.code+')'}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.fundInfoslist" :key="tag.tag_code">{{tag.name+'('+tag.code+')'}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="主题">
              <el-tooltip v-for="tag in options0" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in options0" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行业">
              <el-tooltip v-for="tag in options1" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in options1" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="市场">
              <el-tooltip v-for="tag in temp.marketInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.marketInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人物">
              <el-tooltip v-for="tag in temp.peopleInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.peopleInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="地域">
              <el-tooltip v-for="tag in temp.districtInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.districtInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="组织">
              <el-tooltip v-for="tag in temp.organInfos" :key="tag.tag_code+Math.random()" class="item" effect="dark" :content="String(tag.score)">
                <el-tag>{{tag.name}}</el-tag>
              </el-tooltip>
              <!-- <el-tag v-for="tag in temp.organInfos" :key="tag.tag_code">{{tag.name}}</el-tag> -->
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="核心标签(主)" prop="mainKeyword">
              <el-tag v-for="tag in temp.mainKeyword" :key="tag">{{tag}}</el-tag>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核心标签(副)" prop="viceKeyword">
              <el-tag v-for="tag in temp.viceKeyword" :key="tag">{{tag}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="online">
              <el-select disabled v-model="temp.online" type="text" placeholder="请选择">
                <el-option :value="0" label="立即上线"></el-option>
                <el-option :value="1" label="暂缓上线"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="推送方式" prop="sendChannel">
              <el-select disabled :default-first-option="true" v-model="temp.sendChannel" type="text" placeholder="请选择">
                <el-option value="全员推送" label="全员推送"></el-option>
                <el-option value="不推送" label="不推送"></el-option>
                <el-option value="按板块推送" label="按板块推送"></el-option>
                <el-option value="按个股推送" label="按个股推送"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="写稿类型" prop="author">
              <el-select v-model="temp.author" disabled>
                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="置顶时间" prop="topTime">
              <el-input disabled v-model="temp.topTime" type="text" placeholder="选择日期"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="正文预览" prop="content">
              <el-tabs type="card"  @tab-click="handleTabClick">
                <el-tab-pane label="手机预览">
                  <el-card class="phone">
                    <div class="top-bar">资讯预览</div>
                    <div class="title">{{temp.title}}</div>
                    <div class="info">
                      <span>来源：{{formatSource(temp.source)}}&emsp;</span>
                      <span>发布时间：{{temp.publishTime}}</span>
                    </div>
                    <div class="summary">摘要：{{temp.summary}}</div>
                    <div class="content">
                      <p v-html="formatContent(temp)"></p>
                    </div>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="PC预览">
                  <el-card class="pc">
                    <div class="title">{{temp.title}}</div>
                    <div class="info">
                      <span>来源：{{formatSource(temp.source)}}&emsp;</span>
                      <span>发布时间：{{temp.publishTime}}</span>
                    </div>
                    <div class="summary">摘要：{{temp.summary}}</div>
                    <div class="content">
                      <p v-html="formatContent(temp)"></p>
                    </div>
                  </el-card>
                </el-tab-pane>
              </el-tabs>
            </el-form-item>
          </el-col>
          <el-col v-show="preview" :span="24">
            <el-form-item label="原文">
              <el-card>
                <div class="preview" v-html="previewContent"></div>
              </el-card>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发布时间" prop="publishTime">
              <el-input disabled v-model="temp.publishTime" type="text" :rows="5" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="来源" prop="source">
              <el-input v-model="temp.source" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button plain class="search-bar-button" style="border-width: 2px" type="primary" @click="extendBarVisable = !extendBarVisable">{{extendBarVisable?'收起':'展开'}}附加字段<i
                  :class="extendBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i>
              </el-button>
            </el-form-item>
          </el-col>
          <el-col v-show="extendBarVisable" v-for="i of 10" :key='i' :span="24">
            <el-form-item :label="'附加字段'+i" :prop="'additional_'+ i">
              <el-input disabled v-model="temp['additional_'+ (i-1)]" type="text" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="资讯配图">
              <span v-if="!image">暂无配图</span>
              <img style="max-height: 300px" :src="image.url" :alt="image.name">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogFormVisible2 = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="资讯预览" :visible.sync="previewDialogVisible" width="80%" style="margin-top: -6rem;" append-to-body>
      <el-tabs type="card">
        <el-tab-pane label="手机预览">
          <el-card class="phone">
            <div class="top-bar">
              资讯预览
            </div>
            <div class="title">{{previewData.title}}</div>
            <div class="info">
              <span>来源：{{formatSource(previewData.source)}}&emsp;</span>
              <span>发布时间：{{previewData.publishTime}}</span>
            </div>
            <div class="summary">摘要：{{previewData.summary}}</div>
            <div class="content">
              <p v-html="formatContent(previewData)"></p>
            </div>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="PC预览">
          <el-card class="pc">
            <div class="title">{{previewData.title}}</div>
            <div class="info">
              <span>来源：{{formatSource(previewData.source)}}&emsp;</span>
              <span>发布时间：{{previewData.publishTime}}</span>
            </div>
            <div class="summary">摘要：{{previewData.summary}}</div>
            <div class="content">
              <p v-html="formatContent(previewData)"></p>
            </div>
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import {
  articlePlateList,
  articleAllPlateList,
  articleStockList,
  userClassList,
  articleGet,
  articleAnalysis,
  articleSourceGet,
  articleList,
  batchAudited,
  batchOnline,
  batchRevocation,
  articlePut,
  articleDelete,
  batchDelete,
  analysisImage,
  analysisImageList,
  thirdPartClassList,
  tagsSearch
} from '../../api/article'
import { databaseList } from '../../api/data'
import { getTypeDict } from '../../api/systemManagement'
import Tinymce from '@/components/Tinymce'
import waves from '@/directive/waves' // 水波纹指令
import pinyin from 'pinyin'
import typeOptions from './typeOptions'

export default {
  name: 'complexTable',
  directives: {
    waves
  },
  components: {
    Tinymce
  },
  watch: {
    filterText1(val) {
      this.$refs.tree1.filter(val)
    },
    filterText2(val) {
      this.$refs.tree2.filter(val)
    },
    filterText3(val) {
      this.$refs.tree3.filter(val)
    },
    filterText4(val) {
      this.$refs.tree4.filter(val)
    },
    filterText5(val) {
      this.$refs.tree5.filter(val)
    },
    'listQuery.chooseTime'(val) {
      if (val) {
        const endTime = new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate() + 1
        ).getTime()
        this.listQuery.updateTime = [
          endTime - 24 * 3600 * 1000 * val,
          endTime - 1000
        ]
      }
    },
    'listQuery.chooseTime2'(val) {
      if (val) {
        const endTime = new Date(
          new Date().getFullYear(),
          new Date().getMonth(),
          new Date().getDate() + 1
        ).getTime()
        this.listQuery.publishTime = [
          endTime - 24 * 3600 * 1000 * val,
          endTime - 1000
        ]
      }
    }
  },
  data() {
    return {
      tempData: {},
      typeOptions: typeOptions,
      filterText1: '',
      filterText2: '',
      filterText3: '',
      filterText4: '',
      filterText5: '',
      classVisible: false,
      multipleSelection: [],
      multipleSelectionIds: [],
      props: {
        label: 'name',
        id: 'id',
        key: 'id'
      },
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      editLoading: false,
      refreshing: false,
      preview: false,
      previewContent: '',
      tagType: {
        0: "stock",
        1: "fund",
        2: "theme",
        3: "industry",
        4: "market",
        5: "people",
        6: "districts",
        7: "organs",
      },
      tagName: {
        0: "股票",
        1: "基金",
        2: "主题",
        3: "行业",
        4: "市场",
        5: "人物",
        6: "地域",
        7: "组织",
      },
      listQuery: {
        isOriginal:2,
        pageNum: 1,
        pageSize: 20,
        title: '',
        attitude: '',
        auditStatus: '',
        author: '',
        source: '',
        cmsNewsClassId: '',
        plateCode: '',
        pushChannel: '',
        stockCode: '',
        viewStatus: '',
        chooseTime: '',
        chooseTime2: '',
        updateTime: [
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() -
            24 * 3600 * 1000,
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() - 1000
        ],
        publishTime: ['', ''],
        scene: '',
        tagList: [
          {
            name: "股票",
            tagCode: "",
            tagType: "0",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "基金",
            tagCode: "",
            tagType: "1",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "主题",
            tagCode: "",
            tagType: "2",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "行业",
            tagCode: "",
            tagType: "3",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "市场",
            tagCode: "",
            tagType: "4",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "人物",
            tagCode: "",
            tagType: "5",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "地域",
            tagCode: "",
            tagType: "6",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "组织",
            tagCode: "",
            tagType: "7",
            tagScore: "",
            tagComparision: "",
          }
        ],
        tbSourceId: '',
        thirdPartClassId: ''
      },
      searchOptions: {
        stock: [],
        fund: [],
        theme: [],
        industry: [],
        market: [],
        people: [],
        district: [],
        organ: [],
      },
      allPlateList: [],
      filterPlateList: [],
      allStockList: [],
      filterStockList: [],
      dialogVisible: false,
      showReviewer: false,
      stockSearch: '',
      temp: {
        attitude: 0,
        author: '',
        source: '',
        isOriginal: 2,
        content: '',
        sendChannel: '',
        newsClassId: [],
        newsPlateCodes0: [],
        conceptInfos: [],
        conceptInfoslist: [],
        industryInfos: [],
        newsPlateCodes2: [],
        stockInfos: [],
        stockInfoslist: [],
        fundInfos: [],
        fundInfoslist: [],
        marketInfos: [],
        online: 1,
        topTime: '',
        summary: '',
        title: '',
        enterTime: '',
        publishTime: '',
        tbSource: ''
      },
      dialogFormVisible: false,
      dialogFormVisible2: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogPvVisible: false,
      stockLib: [],
      treeList: [{ name: '栏目列表', code: 0, children: [] }],
      treeList0: [{ name: '概念板块', code: 0, children: [] }],
      treeList1: [{ name: '行业板块', code: 0, children: [] }],
      treeList2: [{ name: '原创板块', code: 0, children: [] }],
      options: [],
      options0: [],
      options1: [],
      options2: [],
      loading: false,
      organOptions: [],
      rwOptions: [],
      flowChartList: [],
	  areaOptions:[],
      pvData: [],
      rules: {
        content: [
          {
            required: true,
            message: '请输入...',
            trigger: 'change'
          }
        ],
        newsClassId: [
          {
            required: true,
            message: '请输入...',
            trigger: 'change'
          }
        ],
        // summary: [
        //   {
        //     required: true,
        //     message: '请输入...',
        //     trigger: 'change'
        //   }
        // ],
        title: [
          {
            required: true,
            message: '请输入...',
            trigger: 'change'
          }
        ]
      },
      downloadLoading: false,
      image: '',
      imageType: '',
      imageList: [],
      previewData: '',
      previewDialogVisible: false,
      imageLoading: false,
      imageListLoading: false,
      imageListVisible: false,
      dataDict: {
        news_source: []
      },
      searchBarVisable: false,
      extendBarVisable: false,
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end =
                new Date(
                  new Date().getFullYear(),
                  new Date().getMonth(),
                  new Date().getDate() + 1
                ).getTime() - 1000
              const start = end + 1000 - 3600 * 1000 * 24
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三天',
            onClick(picker) {
              const end =
                new Date(
                  new Date().getFullYear(),
                  new Date().getMonth(),
                  new Date().getDate() + 1
                ).getTime() - 1000
              const start = end + 1000 - 3600 * 1000 * 24 * 3
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end =
                new Date(
                  new Date().getFullYear(),
                  new Date().getMonth(),
                  new Date().getDate() + 1
                ).getTime() - 1000
              const start = end + 1000 - 3600 * 1000 * 24 * 7
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      qzoptions: [
        {
          value: '0',
          label: '='
        },
        {
          value: '1',
          label: '>'
        },
        {
          value: '2',
          label: '≥'
        },
        {
          value: '3',
          label: '<'
        },
        {
          value: '5',
          label: '≤'
        }
      ],
      dbList: [],
      thirdlist: []
    }
  },
  created() {
    // this.getDict()
    this.getList()
    this.getPlateList()
    this.getdatabaseList()
  },
  methods: {
    resetSearch(){
      this.listQuery = {
        isOriginal:2,
        pageNum: 1,
        pageSize: 20,
        title: '',
        attitude: '',
        auditStatus: '',
        author: '',
        source: '',
        cmsNewsClassId: '',
        plateCode: '',
        pushChannel: '',
        stockCode: '',
        viewStatus: '',
        chooseTime: '',
        chooseTime2: '',
        updateTime: [
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() -
            24 * 3600 * 1000,
          new Date(
            new Date().getFullYear(),
            new Date().getMonth(),
            new Date().getDate() + 1
          ).getTime() - 1000
        ],
        publishTime: ['', ''],
        scene: '',
        tagList: [
          {
            name: "股票",
            tagCode: "",
            tagType: "0",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "基金",
            tagCode: "",
            tagType: "1",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "主题",
            tagCode: "",
            tagType: "2",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "行业",
            tagCode: "",
            tagType: "3",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "市场",
            tagCode: "",
            tagType: "4",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "人物",
            tagCode: "",
            tagType: "5",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "地域",
            tagCode: "",
            tagType: "6",
            tagScore: "",
            tagComparision: "",
          },
          {
            name: "组织",
            tagCode: "",
            tagType: "7",
            tagScore: "",
            tagComparision: "",
          }
        ],
        tbSourceId: '',
        thirdPartClassId: ''
      }
      this.getList()
    },
    getdatabaseList() {
      databaseList({
        pageNum: 1,
        pageSize: 9999
      }).then((res) => {
        this.dbList = res.Data
      })
    },
    dblistchange() {
      thirdPartClassList(this.listQuery.tbSourceId, {}).then((res) => {
        this.thirdlist = res.Data
      })
    },
    addTags() {
      const list = {
        tagName: '',
        tagType: '',
        tagScore: '',
        tagComparision: ''
      }
      this.listQuery.tags.push(list)
    },
    delTags(data) {
      this.listQuery.tags.splice(data, 1)
    },
    getDict() {
      getTypeDict({
        type: 'news_source'
      }).then((response) => {
        this.dataDict.news_source = response.Data
      })
    },
    formatReject(val) {
      let result
      try {
        result = JSON.parse(val)
      } catch (e) {
        result = val
      }
      return result
    },
    formatOriginal(data) {
      const content = data.replace(/(\r\n)|(\r)|(\n)/g, '<br /><br />')
      return content
    },
    formatContent(data) {
      if (!data.content) return
      // console.log(data)
      const keyword = []
      // console.log(data)
      if (data.stockInfos && data.stockInfos.length > 0) {
        keyword.push(
          data.stockInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.conceptInfos && data.conceptInfos.length > 0) {
        keyword.push(
          data.conceptInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.industryInfos && data.industryInfos.length > 0) {
        keyword.push(
          data.industryInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if (data.newsPlateCodes2 && data.newsPlateCodes2.length > 0) {
        keyword.push(
          data.newsPlateCodes2
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      if(data.fundInfos && data.fundInfos.length>0 ){
        keyword.push(
          data.fundInfos
            .map((val) => {
              return val.name
            })
            .join('|')
        )
      }
      const content = data.content
      if (keyword.length === 0) return content
      const contentReg = new RegExp(
        '(?!<[^>]*)(' + keyword.join('|').replace(/\*/g, '\\*') + ')(?![^<]*>)',
        'g'
      )
      // const contentReg = new RegExp('(' + keyword + ')','g')
      // console.log(contentReg)
      return content.replace(
        contentReg,
        '<span class="news-keyword">$1</span>'
      )
    },
    filterNode(value, data) {
      if (!value) return true
      return (
        data.name.indexOf(value) !== -1 ||
        pinyin(data.name, {
          style: pinyin.STYLE_FIRST_LETTER,
          heteronym: true
        })
          .join('')
          .indexOf(value) !== -1
      )
    },
    remoteMethodstock(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'stock',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.temp.stockInfoslist=[...this.temp.stockInfos,...list]
          })
      } else {
        this.loading=false
        this.temp.stockInfoslist = [...this.temp.stockInfos]
      }
    },
    remoteMethodfund(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'fund',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.temp.fundInfoslist=[...this.temp.fundInfos,...list]
          })
      } else {
        this.loading=false
        this.temp.fundInfoslist = [...this.temp.fundInfos]
      }
    },
    remoteMethodtheme(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'theme',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.options0=[...this.temp.conceptInfos,...list]
          })
      } else {
        this.loading=false
        this.options0 = [...this.temp.conceptInfos]
      }
    },
    remoteMethodindustry(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'industry',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.options1=[...this.temp.industryInfos,...list]
          })
      } else {
        this.loading=false
        this.options1 = [...this.temp.industryInfos]
      }
    },
    remoteMethodmarket(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'market',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.flowChartList=[...this.temp.marketInfos,...list]
          })
      } else {
        this.loading=false
        this.flowChartList = [...this.temp.marketInfos]
      }
    },
    remoteMethodpeople(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'people',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.rwOptions=[...this.temp.peopleInfos,...list]
          })
      } else {
        this.loading=false
        this.rwOptions = [...this.temp.peopleInfos]
      }
    },
    remoteMethoddistrict(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'district',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.areaOptions=[...this.temp.districtInfos,...list]
          })
      } else {
        this.loading=false
        this.areaOptions = [...this.temp.districtInfos]
      }
    },
    remoteMethodorgan(query) {
      if (query !== '') {
        this.loading=true
          tagsSearch({
            type:'organ',
            name:query
          }).then(res=>{
            let list=res.Data.map(i=>{
              return {
                ...i,tag_code:i.tagCode
              }
            })
            this.loading=false
            this.organOptions=[...this.temp.organInfos,...list]
          })
      } else {
        this.loading=false
        this.organOptions = [...this.temp.organInfos]
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.multipleSelectionIds = val.map((e) => e.id)
    },
    handleOnline() {
      const ids = this.multipleSelection
        .filter((e) => (e.viewStatus === 1||e.viewStatus === 3))
        .map((e) => e.id)
      if (ids.length === 0) return
      batchOnline(ids).then(() => {
        this.getList()
        this.$notify({
          title: '成功',
          message: '上线成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleRevocation() {
      const ids = this.multipleSelection
        .filter((e) => e.viewStatus === 2)
        .map((e) => e.id)
      if (ids.length === 0) return
      batchRevocation(ids).then(() => {
        this.getList()
        this.$notify({
          title: '成功',
          message: '撤回成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleAudited() {
      const ids = this.multipleSelection
        .filter(
          (e) =>
            (e.viewStatus === 0)&& e.creater !== this.$store.state.user.userCode
        )
        .map((e) => e.id)
      if (ids.length === 0) return
      batchAudited(ids).then(() => {
        this.getList()
        this.$notify({
          title: '成功',
          message: '审核成功',
          type: 'success',
          duration: 2000
        })
      })
    },
    handleDeleteList() {
      if (this.multipleSelectionIds.length === 0) {
        this.$message({
          type: 'warning',
          message: '请勾选需要删除的数据'
        })
        return
      }
      this.$confirm(
        '一旦失效，该篇资讯将彻底下线并且不可编辑，是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        batchDelete(this.multipleSelectionIds).then(() => {
          this.getList()
          this.$notify({
            title: '成功',
            message: '失效成功',
            type: 'success',
            duration: 2000
          })
        })
      })
    },
    updateAuditData() {
      const update = () => {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            const params = Object.assign({}, this.temp)
            params.plateCodes = []
            params.stockCodes = []
            params.classInfos = []
            this.temp.conceptInfos.forEach((e) => {
              params.plateCodes.push(e)
            })
            this.temp.industryInfos.forEach((e) => {
              params.plateCodes.push(e)
            })
            this.temp.newsPlateCodes2.forEach((e) => {
              params.plateCodes.push(e)
            })
            params.stockCodes = this.temp.stockInfos
          params.fundCodes = this.temp.fundInfos
          params.marketsCodes = this.temp.marketInfos
          params.peopleCodes = this.temp.peopleInfos
          params.organsCodes = this.temp.organInfos
          params.districtsCodes = this.temp.districtInfos
          params.newsPlateCodes0 = this.temp.conceptInfos
          params.newsPlateCodes1 = this.temp.industryInfos
            this.temp.newsClassId.forEach((e) => {
              e.classId = e.id
              e.onLine = params.online
              e.auditStatus = 1
              params.classInfos.push(e)
            })
            params.selectionCrudParam = {
              optionIds: this.imageList.map((e) => e.id),
              selectId: this.image.id,
              type: this.imageType
            }
            articlePut(params).then(() => {
              batchAudited([this.temp.id]).then(() => {
                this.getList()
                this.dialogFormVisible = false
                this.$notify({
                  title: '成功',
                  message: '审核成功',
                  type: 'success',
                  duration: 2000
                })
              })
            })
          }
        })
      }
      if (this.temp.sendChannel && this.temp.sendChannel !== '不推送') {
        this.$confirm(
          '您选择了' +
            this.temp.sendChannel +
            '，如果审核通过将发送给全部用户，是否确认?',
          '提示',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }
        ).then(() => {
          update()
        })
      } else {
        update()
      }
    },
    formatClass(data) {
      switch (data) {
        case 0:
          return 'danger' // '未审核'
        case 1:
          return 'success' // '已审核'
        case 2:
          return 'primary' // '已上线'
        case 3:
          return 'warning' // '已撤回'
        case 4:
          return 'warning' // '已驳回'
        case 5:
          return 'warning' // '未发布'
        case 6:
          return 'info' // '已失效'
      }
    },
    formatStatu(data) {
      switch (data) {
        case 0:
          return '未审核'
        case 1:
          return '已审核'
        case 2:
          return '已上线'
        case 3:
          return '已撤回'
        case 4:
          return '已驳回'
        case 5:
          return '未发布'
        case 6:
          return '已失效'
      }
    },
    formatSource(data) {
      for (let i = 0; i < this.dataDict.news_source.length; i++) {
        if (this.dataDict.news_source[i].dictKey === data) {
          return this.dataDict.news_source[i].dictValue
        }
      }
      return data
    },
    refreshList() {
      this.refreshing = true
      this.listQuery.title = this.listQuery.title.trim()
      const params = Object.assign({}, this.listQuery)
      if (this.listQuery.updateTime) {
        params.startUpdateTime = this.listQuery.updateTime[0]
        params.endUpdateTime = this.listQuery.updateTime[1]
      } else {
        params.startUpdateTime = ''
        params.endUpdateTime = ''
      }
      articleList(params)
        .then((response) => {
          this.refreshing = false
          this.list = response.Data
          this.total = parseInt(response.total)
          this.$message({
            message: '刷新成功',
            type: 'success'
          })
        })
        .catch(() => {
          this.refreshing = false
        })
    },
    remoteMethodSearch(type, query) {
      if (query !== "") {
        this.loading = true;
        tagsSearch({
          type: this.tagType[type],
          key: query,
        }).then((res) => {
          const list = res.Data.map((i) => {
             if(type==='0'||type==='1'){
                return {
                  ...i,
                  tag_code: i.tagCode,
                  name:i.name+`(${i.code})`
                };
              }else{
                return {
                  ...i,
                  tag_code: i.tagCode
                };
              }
          });
          this.searchOptions[this.tagType[type]] = list;
          console.log(this.searchOptions);
          this.loading = false;
        });
      } else {
        this.searchOptions[this.tagType[type]] = [];
        this.loading = false;
      }
    },
    getList() {
      let tagScoreFlag = true;
      let tempList = this.listQuery.tagList;
      for (let index = 0; index < tempList.length; index++) {
        const element = tempList[index];
        if((element.tagComparision!==''&&element.tagScore!=="")||(element.tagComparision ===''&&element.tagScore==="")){

        } else{
          tagScoreFlag = false;
          break;
        }
      }

      if(!tagScoreFlag){
       this.$message({
          message: '标签搜索请填写完整，权重 分数和范围必填！',
          type: 'warning'
        });
        return false
      }
      this.listLoading = true
      this.listQuery.title = this.listQuery.title.trim()
      const params = Object.assign({}, this.listQuery)
      if (this.listQuery.updateTime) {
        params.startUpdateTime = this.listQuery.updateTime[0]
        params.endUpdateTime = this.listQuery.updateTime[1]
      } else {
        params.startUpdateTime = ''
        params.endUpdateTime = ''
      }
      if (this.listQuery.publishTime) {
        params.startPublishTime = this.listQuery.publishTime[0]
        params.endPublishTime = this.listQuery.publishTime[1]
      } else {
        params.startPublishTime = ''
        params.endPublishTime = ''
      }
      articleList(params).then((response) => {
        this.listLoading = false
        this.list = response.Data
        this.total = parseInt(response.total)
      })
    },
    getPlateList() {
      articleAllPlateList({
        pageNum: 1,
        pageSize: 99999
      }).then((response) => {
        this.allPlateList = response.Data
      })
    },
    handlePreview() {
      articleSourceGet(this.temp).then((response) => {
        this.$message({
          message: '获取原文成功',
          type: 'success'
        })
        this.previewContent = response.Data[0].sourceContentStr
        this.preview = true
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val
      this.getList()
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      row.status = status
    },
    handleUpdate(row) {
      this.preview = false
      row.editLoading = true
      articleGet(row).then((response) => {
        this.temp = Object.assign({}, response.Data[0])
        for (let i = 0; i < this.temp.newsInfoExtends.length; i++) {
          this.temp['additional_' + this.temp.newsInfoExtends[i].extendIndex] =
            this.temp.newsInfoExtends[i].extendContent || ''
        }
        this.tempData = Object.assign({}, response.Data[0])
        if (this.temp.online === 2) this.temp.online = 0
        const tempVal1 = []
        this.image = response.Data[0].pictureEntity || ''
        this.imageList = []
        this.imageType = ''
        this.$set(
          this.temp,
          'stockInfoslist',
          Object.assign([], response.Data[0].stockInfos)
        )
        this.$set(
          this.temp,
          'fundInfoslist',
          Object.assign([], response.Data[0].fundInfos)
        )
        this.options0 = Object.assign([], this.temp.conceptInfos)
        this.options1 = Object.assign([], this.temp.industryInfos)
        this.options2 = Object.assign([], this.temp.userDefinedInfos)
        this.organOptions = Object.assign([], this.temp.organInfos)
        this.flowChartList = Object.assign([], this.temp.marketInfos)
        this.rwOptions = Object.assign([], this.temp.peopleInfos)
        this.areaOptions = Object.assign([], this.temp.districtInfos)
        this.temp.stockInfoslist = this.temp.stockInfos
        this.temp.fundInfoslist = this.temp.fundInfos
        this.$set(
          this.temp,
          'newsPlateCodes2',
          Object.assign([], this.temp.userDefinedInfos)
        )
        this.$set(
          this.temp,
          'newsClassId',
          Object.assign([], this.temp.classInfos)
        )
        this.temp.auditStatus = this.temp.classInfos[0].auditStatus
        this.dialogStatus = 'update'
        this.dialogFormVisible = true
        this.$set(this.temp, 'newsStockCodes', Object.assign([], tempVal1))

        const params = {
          newsId: this.temp.id,
          content: this.temp.content || 'test',
          title: this.temp.title
        }
        articleAnalysis(params).then((response) => {
          const sensitiveWords = response.Data[0].sensitiveWords
          if (sensitiveWords.length > 0) {
            const contentReg = new RegExp(
              '(?!<[^>]*)(' +
                sensitiveWords
                  .sort((a, b) => {
                    return b.length - a.length
                  })
                  .join('|') +
                ')(?![^<]*>)',
              'g'
            )
            this.temp.content = this.temp.content.replace(
              contentReg,
              `<span class="sensitive">$1</span>`
            )
          }
          const content = this.temp.content
          if (this.$refs.editor) this.$refs.editor.setContent(content)
          row.editLoading = false
        })
      })
    },
    handleShow(row) {
      this.preview = false
      row.editLoading = true
      articleGet(row).then((response) => {
        this.temp = Object.assign({}, response.Data[0])
        for (let i = 0; i < this.temp.newsInfoExtends.length; i++) {
          this.temp['additional_' + this.temp.newsInfoExtends[i].extendIndex] =
            this.temp.newsInfoExtends[i].extendContent || ''
        }
        this.image = response.Data[0].pictureEntity || ''
        if (this.temp.online === 2) this.temp.online = 0

        this.temp.stockInfoslist = Object.assign(
          {},
          response.Data[0].stockInfos
        )
        this.temp.fundInfoslist = Object.assign({}, response.Data[0].fundInfos)
        this.options0 = Object.assign([], this.temp.conceptInfos)
        this.options1 = Object.assign([], this.temp.industryInfos)
        this.options2 = Object.assign([], this.temp.userDefinedInfos)
        this.organOptions = Object.assign([], this.temp.organInfos)
        this.flowChartList = Object.assign([], this.temp.marketInfos)
        this.rwOptions = Object.assign([], this.temp.peopleInfos)
        this.areaOptions = Object.assign([], this.temp.districtInfos)
        this.$set(
          this.temp,
          'newsPlateCodes2',
          Object.assign([], this.temp.userDefinedInfos)
        )
        this.$set(
          this.temp,
          'newsClassId',
          Object.assign([], this.temp.classInfos)
        )
        this.options0 = Object.assign([], this.temp.conceptInfos)
        this.options1 = Object.assign([], this.temp.industryInfos)
        this.options2 = Object.assign([], this.temp.userDefinedInfos)
        this.dialogStatus = 'update'
        this.dialogFormVisible2 = true
        const content = this.temp.content
        //					const content = this.temp.content.replace(/(\r\n)|(\r)|(\n)/g, '<br /><br />')
        if (this.$refs.editor) this.$refs.editor.setContent(content)
        row.editLoading = false

        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.phone .content>p strong')
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })

        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.pc .content>p strong')
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      })
    },
    handleTabClick(node){
      if(node.paneName==='0'){
        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.phone .content>p strong')
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      }else{
        this.$nextTick(()=>{
          let strongs = document.querySelectorAll('.pc .content>p strong')
          for (let i = 0; i <strongs.length ; i++) {
            if(strongs[i].getAttribute('data-code')){
              let text= strongs[i].innerText
              strongs[i].innerHTML = `<span class="news-keyword">${text}</span>`
            }
          }
        })
      }
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const params = Object.assign({}, this.temp)
          params.plateCodes = []
          params.stockCodes = []
          params.classInfos = []
          const mapPlateCode = {}
          if (this.tempData) {
            const tempPlateCode = this.tempData.industryInfos.concat(
              this.tempData.conceptInfos,
              this.tempData.userDefinedInfos
            )
            for (let i = 0; i < tempPlateCode.length; i++) {
              mapPlateCode[tempPlateCode[i].code] = tempPlateCode[i].count
            }
          }
          this.temp.conceptInfos.forEach((e) => {
            e.count = mapPlateCode[e.code] || 1
            params.plateCodes.push(e)
          })
          this.temp.industryInfos.forEach((e) => {
            e.count = mapPlateCode[e.code] || 1
            params.plateCodes.push(e)
          })
          this.temp.newsPlateCodes2.forEach((e) => {
            e.count = mapPlateCode[e.code] || 1
            params.plateCodes.push(e)
          })
          params.stockCodes = this.temp.stockInfos
          params.fundCodes = this.temp.fundInfos
          params.marketsCodes = this.temp.marketInfos
          params.peopleCodes = this.temp.peopleInfos
          params.organsCodes = this.temp.organInfos
          params.districtsCodes = this.temp.districtInfos
          params.newsPlateCodes0 = this.temp.conceptInfos
          params.newsPlateCodes1 = this.temp.industryInfos
          this.temp.newsClassId.forEach((e) => {
            e.classId = e.id
            e.onLine = params.online
            e.auditStatus = 1
            params.classInfos.push(e)
          })
          params.selectionCrudParam = {
            optionIds: this.imageList.map((e) => e.id),
            selectId: this.image.id,
            type: this.imageType
          }
          params.newsInfoExtends = []
          for (let i = 0; i < 10; i++) {
            params.newsInfoExtends.push({
              extendIndex: i,
              extendContent: params['additional_' + i] || ''
            })
          }
          articlePut(params).then(() => {
            this.getList()
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm(
        '一旦失效，该篇资讯将彻底下线并且不可编辑，是否继续？',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          articleDelete(row).then(() => {
            this.$notify({
              title: '成功',
              message: '失效成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消失效'
          })
        })
    },
    renderClassContent(h, { node, data, store }) {
      return (
        <span
          class={
            node.isLeaf && node.level > 1
              ? 'custom-tree-node'
              : 'custom-tree-node custom-tree-notLeaf'
          }
        >
          <span>{node.label}</span>
          <span>
            {node.level > 1 && node.isLeaf ? (
              <el-button
                size='mini'
                type='text'
                on-click={() => (this.listQuery.cmsNewsClassId = data.id)}
              >
                选择
              </el-button>
            ) : (
              ''
            )}
          </span>
        </span>
      )
    },
    renderContent(h, { node, data, store }) {
      return (
        <span
          class={
            node.isLeaf && node.level > 1
              ? 'custom-tree-node'
              : 'custom-tree-node custom-tree-notLeaf'
          }
        >
          <span>{node.label}</span>
          <span>
            {node.level > 1 && node.isLeaf ? (
              <el-button
                size='mini'
                type='text'
                on-click={(e) => this.selectClassNode(node, data, e)}
              >
                选择
              </el-button>
            ) : (
              ''
            )}
          </span>
        </span>
      )
    },
    selectClassNode(node, data, e) {
      e.stopPropagation()
      this.temp['newsClassId'] = [data]
    },
    selectNode(node, data, e, type) {
      e.stopPropagation()
      const list = this.temp['newsPlateCodes' + type]
      for (let i = 0; i < list.length; i++) {
        if (list[i].code === data.code) return
      }
      list.push(data)
    },
    getPlate(e) {
      this.filterText1 = ''
      this.filterText2 = ''
      this.filterText3 = ''
      const params = {
        pageNum: 1,
        pageSize: 9999,
        type: e
      }
      articlePlateList(params).then((response) => {
        const temp = {}
        const result = []
        const data = response.Data
        const length = data.length
        for (let i = 0; i < length; i++) {
          temp[data[i].code] = data[i]
          this['options' + e].push(data[i])
        }
        for (let i = 0; i < length; i++) {
          if (temp[data[i].code].parentCode && temp[data[i].parentCode]) {
            if (!temp[data[i].parentCode].children) {
              temp[data[i].parentCode].children = []
            }
            temp[data[i].parentCode].children.push(temp[data[i].code])
          } else {
            result.push(temp[data[i].code])
          }
        }
        this['treeList' + e][0].children = result
      })
    },
    getImage() {
      this.imageLoading = true
      this.imageList = []
      const params = Object.assign({}, this.temp)
      params.plateCodes = []
      params.stockCodes = []
      params.classInfos = []
      this.temp.conceptInfos.forEach((e) => {
        params.plateCodes.push(e.name)
      })
      this.temp.industryInfos.forEach((e) => {
        params.plateCodes.push(e.name)
      })
      this.temp.newsPlateCodes2.forEach((e) => {
        params.plateCodes.push(e.name)
      })
      this.temp.stockInfos.forEach((e) => {
        params.stockCodes.push(e.name)
      })
      this.temp.newsClassId.forEach((e) => {
        params.classInfos.push(e.id)
      })
      const temDiv = document.createElement('div')
      temDiv.innerHTML = this.temp.content
      temDiv.querySelectorAll('.sensitive').forEach((spanNode) => {
        spanNode.insertAdjacentText('beforebegin', spanNode.innerText)
        spanNode.parentNode.removeChild(spanNode)
      })
      params.content = temDiv.innerHTML
      analysisImage({
        classCodeList: params.classInfos,
        stockCodeList: params.stockCodes,
        plateCodeList: params.plateCodes,
        content: params.content
      })
        .then((response) => {
          this.image = response.Data[0].selectPicture
          this.imageType = response.Data[0].type
          this.imageList = response.Data[0].options || []
          if (response.Data[0].type === 1) {
            this.$notify({
              title: '失败',
              message: '未匹配到图片',
              type: 'error',
              duration: 2000
            })
          } else {
            this.$notify({
              title: '成功',
              message: '智能配图成功',
              type: 'success',
              duration: 2000
            })
          }
          this.imageLoading = false
        })
        .catch(() => {
          this.imageLoading = false
        })
    },
    getImageList() {
      this.imageListLoading = true
      if (this.imageList.length) {
        this.imageListLoading = false
        this.imageListVisible = true
      } else {
        analysisImageList({
          newsId: this.temp.id
        }).then((response) => {
          this.imageList = response.Data[0].options || []
          this.imageListVisible = true
          this.imageListLoading = false
        })
      }
    },
    chooseImage(image) {
      this.imageListVisible = false
      this.image = image
    }
  }
}
</script>

<style>
	.hide {
		display: none;
	}

	.el-dialog__body {
		padding: 24px;
		line-height: normal;
	}

	.nowrap {
		white-space: nowrap;
	}

	.el-tooltip__popper {
		max-width: 50%;
	}
</style>

<style lang="stylus" scoped>
	.preview {
		word-break break-all
		text-align justify
	}

	.phone {
		word-break break-all
		line-height 24px
		margin auto
		width 375px
		height 600px
		overflow-y auto
		&::-webkit-scrollbar {
			display: none;
		}
		.top-bar {
			text-align center
			padding 10px 15px
			margin 0 -20px
			position absolute
			top 0
			width 373px
			background-color #000
			color #fff
			font-size 120%
			font-weight bold
		}
		.title {
			text-align justify
			margin-top 52px
			font-size 110%
			font-weight bolder
		}
		.info {
			font-size 85%
			color #5d5d5d
		}
		.summary {
			text-align justify
			padding 5px 10px
			margin 10px 0 10px
			font-size 90%
			line-height 1.2rem
			color #333
			border-radius 5px
			background-color #ddd
		}
		.content {
			text-align justify &:after {
				display: inline-block;
				content: '';
				padding-left: 100%;
			}
		}
	}

	.pc {
		word-break break-all
		line-height 24px
		font-size: 16px
		margin auto
		width 100%
		height 600px
		overflow-y auto
		&::-webkit-scrollbar {
			display: none;
		}
		.title {
			text-align justify
			margin-top 12px
			font-size 120%
			font-weight bolder
		}
		.info {
			font-size 85%
			color #5d5d5d
		}
		.summary {
			text-align justify
			padding 5px 10px
			margin 10px 0
			font-size 90%
			line-height 1.2rem
			color #333
			border-radius 5px
			background-color #ddd
		}
		.content {
			text-align justify &:after {
				display: inline-block;
				content: '';
				padding-left: 100%;
			}
		}
	}

	.image-button {
		padding 10px
		background-color
		transparent
		border none
		width 100%
		&:hover {
			box-shadow 0 0 10px #aaa border #aaa
		}
	}
</style>
